<template>
  <div>
    <q-card class="no-shadow" bordered>
      <q-card-section class="text-h6"> 饼图 </q-card-section>
      <q-card-section>
        <VChart
          :option="options"
          class="q-mt-md"
          :resizable="true"
          autoresize
          style="height: 285px"
        />
      </q-card-section>
    </q-card>
  </div>
</template>

<script setup lang="ts">
import 'echarts';
import VChart from 'vue-echarts';
const options = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)',
  },
  legend: {
    top: 'bottom',
    bottom: '5%',
    left: 'center',
  },
  series: [
    {
      name: '来源',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '35%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2,
      },
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: '搜索' },
        { value: 735, name: '网站' },
        { value: 580, name: '邮箱' },
        { value: 484, name: '广告' },
        { value: 300, name: '视频' },
      ],
    },
  ],
};
</script>

<style scoped></style>
